<template>
  <div class="scct">
    <el-form :model="formInline" label-position="left" class="xtcm">
      <el-col :span="6">
        <el-form-item label="系统船名">
          <Select 
            :selectTableColumnData="selectTableColumnData" 
            placeholder="选择系统船名" 
            :selectTableData="tableData" 
            optionKey="shipNo" 
            width="55%"
            @changeFdata="changeFdata(arguments,0)"
            :hasRemoteMethod="true"
            paramsKey="condition"
            url="/tos/shipchar/getShip"
            method='GET'
            :params="{condition:''}"
          />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="航次">
          <el-card class="box-card" style="width:150px;height:30px">
            <span>{{formInline.hc}}</span>
          </el-card>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="进出口">
          <el-card class="box-card" style="width:150px;height:30px">
            <span>{{formInline.jck}}</span>
          </el-card>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="内外贸">
          <el-card class="box-card" style="width:150px;height:30px">
            <span>{{formInline.nwm}}</span>
          </el-card>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item >
          <el-input v-model="fileName" placeholder="请输入下载文件名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item >
          <el-button type="primary" @click="getCt">下载</el-button>
        </el-form-item>
      </el-col>
      
    </el-form>
  </div>
</template>

<script>
import Select from '@/components/Select/import-ship-cntr'
import api from '@/api/modules/EDI/index.js'
export default {
  name: 'exportShipCntr',
  components: { Select },
  data() {
    return {
      formInline: {
        shipNam: '',
        hc: '',
        jck: '',
        nwm: ''
      },
      tableData: [],
      selectTableColumnData: [
        { label: '船名', props: 'shipNam', width: 100 },
        { label: '船编号', props: 'shipNo', width: 100 },
        { label: '船代码', props: 'shipCod', width: 100 },
        { label: '航次', props: 'voyage', width: 100 },
        { label: '进出口', props: 'ieid', width: 100 },
        { label: '内外贸', props: 'tradeId', width: 100 }
      ],
      form: {
        imgSavePath: ''
      },
      fileName: ''
    }
  },
  watch: {
    'formInline.shipNam': {
      handler(newV, oldV) {
        if (newV === undefined || newV === '') return
        let params = []
        this.tableData.forEach(item => {
          if (item.shipNo === newV) {
            params = item
          }
        })
        console.log(this.ediData, newV, oldV, params, 'edidatrqa');
        this.formInline.hc = params.shipCod
        this.formInline.jck = params.ieid
        this.formInline.nwm = params.tradeId
        if (oldV !== '') { // 首次进入不调
          // this.getEdiJx(params.id)
          // this.getEdiXtGl({ shipCode: params.shipCod, voyage: params.voyage })
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getSelectList()
  },
  methods: {
    /**
     * 获取航次下拉框数据
     */
    async getSelectList() {
      const res = await api.reqCtHcList({ condition: '' })
      this.tableData = res.data
      console.log(res, 'resss');
    },
    changeFdata(text, index) {
      if (index === 0) {
        this.formInline.shipNam = text[0]
      }
    },
    async getCt() {
      const res = await api.reqCt({ shipNo: this.formInline.shipNam, operNam: '操作台4' })
      console.log(res)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = URL.createObjectURL(new Blob([res]), { type: 'application/text/plain;charset=GB2312' })
      const fileName = this.fileName
      link.setAttribute('download', `${fileName}`)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

<style lang="less" scoped>
.scct {
  padding: 10px 20px;
  height: calc(100vh - 94px);
  .xtcm {
    width: 80%;
  }
}
/deep/ .el-card__body {
    padding: 0 20px;
}
</style>